﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dream</title>
    <!-- Bootstrap Styles-->
    <link href="assets/css/bootstrap.css" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="assets/css/font-awesome.css" rel="stylesheet" />
    <!-- Custom Styles-->
    <link href="assets/css/custom-styles.css" rel="stylesheet" />
    <!-- Google Fonts-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
    <!-- TABLE STYLES-->
    <link href="assets/js/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="assets/js/dataTables/buttons.dataTables.css"/>
    <link rel="stylesheet" type="text/css" href="assets/js/dataTables/buttons.bootstrap.min.css"/>
</head>
<body>
<div id="wrapper">
    <nav class="navbar navbar-default top-navbar" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">Dream</a>
        </div>

        <ul class="nav navbar-top-links navbar-right">
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                    <i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-messages">
                    <li>
                        <a href="#">
                            <div>
                                <strong>John Doe</strong>
                                <span class="pull-right text-muted">
                                        <em>Today</em>
                                    </span>
                            </div>
                            <div>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <strong>John Smith</strong>
                                <span class="pull-right text-muted">
                                        <em>Yesterday</em>
                                    </span>
                            </div>
                            <div>Lorem Ipsum has been the industry's standard dummy text ever since an kwilnw...</div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <strong>John Smith</strong>
                                <span class="pull-right text-muted">
                                        <em>Yesterday</em>
                                    </span>
                            </div>
                            <div>Lorem Ipsum has been the industry's standard dummy text ever since the...</div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a class="text-center" href="#">
                            <strong>Read All Messages</strong>
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </li>
                </ul>
                <!-- /.dropdown-messages -->
            </li>
            <!-- /.dropdown -->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                    <i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-tasks">
                    <li>
                        <a href="#">
                            <div>
                                <p>
                                    <strong>Task 1</strong>
                                    <span class="pull-right text-muted">60% Complete</span>
                                </p>
                                <div class="progress progress-striped active">
                                    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                        <span class="sr-only">60% Complete (success)</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <p>
                                    <strong>Task 2</strong>
                                    <span class="pull-right text-muted">28% Complete</span>
                                </p>
                                <div class="progress progress-striped active">
                                    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="28" aria-valuemin="0" aria-valuemax="100" style="width: 28%">
                                        <span class="sr-only">28% Complete</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <p>
                                    <strong>Task 3</strong>
                                    <span class="pull-right text-muted">60% Complete</span>
                                </p>
                                <div class="progress progress-striped active">
                                    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                        <span class="sr-only">60% Complete (warning)</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <p>
                                    <strong>Task 4</strong>
                                    <span class="pull-right text-muted">85% Complete</span>
                                </p>
                                <div class="progress progress-striped active">
                                    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%">
                                        <span class="sr-only">85% Complete (danger)</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a class="text-center" href="#">
                            <strong>See All Tasks</strong>
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </li>
                </ul>
                <!-- /.dropdown-tasks -->
            </li>
            <!-- /.dropdown -->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                    <i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-alerts">
                    <li>
                        <a href="#">
                            <div>
                                <i class="fa fa-comment fa-fw"></i> New Comment
                                <span class="pull-right text-muted small">4 min</span>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <i class="fa fa-twitter fa-fw"></i> 3 New Followers
                                <span class="pull-right text-muted small">12 min</span>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <i class="fa fa-envelope fa-fw"></i> Message Sent
                                <span class="pull-right text-muted small">4 min</span>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <i class="fa fa-tasks fa-fw"></i> New Task
                                <span class="pull-right text-muted small">4 min</span>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <i class="fa fa-upload fa-fw"></i> Server Rebooted
                                <span class="pull-right text-muted small">4 min</span>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a class="text-center" href="#">
                            <strong>See All Alerts</strong>
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </li>
                </ul>
                <!-- /.dropdown-alerts -->
            </li>
            <!-- /.dropdown -->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                    <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
                    </li>
                    <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
                    </li>
                    <li class="divider"></li>
                    <li><a href="#"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
                    </li>
                </ul>
                <!-- /.dropdown-user -->
            </li>
            <!-- /.dropdown -->
        </ul>
    </nav>
    <!--/. 左侧菜单  -->
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">
                <li>
                    <a href="index.html"><i class="fa fa-edit"></i> 自定义表单</a>
                </li>
            </ul>

        </div>

    </nav>
    <!-- /. 右侧内容  -->
    <div id="page-wrapper" >
        <div id="page-inner">
            <!--顶部标题-->
            <div class="row">
                <div class="col-md-12">
                    <h1 class="page-header">
                        Custom Forms <small>form list page.</small>
                    </h1>
                </div>
            </div>
            <!-- /. 查询表单  -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default"><!--面板-->
                        <div class="panel-heading"><!--面板头部-->
                        </div>
                        <div class="panel-body"><!--面板内容-->
                            <div>
                                <form id="searchForm" onsubmit="return false">
                                    <input class="form-control" id="tableId" name="tableId" type="hidden">
                                    <div>
                                        <div class="form-group col-lg-4 text-center">
                                            <label>所属表单：</label>
                                            <input class="form-control" id="tableName" data-condition="like" disabled style="width:200px;display: inline">
                                            <!--<p class="form-control-static" id="tableName" style="width:200px;display: inline"></p>-->
                                        </div>
                                        <div class="form-group col-lg-4 text-center">
                                            <label>字段名称：</label>
                                            <input class="form-control" name="nameShort" data-condition="like" style="width:200px;display: inline">
                                        </div>
                                        <div class="form-group  col-lg-4 text-right">
                                            <button id="search" class="btn btn-info"><i class="fa fa-search"></i> 查询</button>
                                            <button type="reset" class="btn btn-default"><i class="fa fa-refresh"></i> 重置</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <!-- /.row (nested) -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>

            <!-- /. 表格  -->
            <div class="row">
                <div class="col-md-12">
                    <!-- Advanced Tables -->
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Advanced Tables
                        </div>
                        <div class="panel-body">
                            <div class="table-responsive" id="table-content">

                            </div>

                        </div>
                    </div>
                    <!--End Advanced Tables -->
                </div>
            </div>
        </div>
        <!-- /. PAGE INNER  -->
    </div>
    <!-- /. PAGE WRAPPER  -->
</div>
<!--新增对话框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style='width: 800px;'>
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">新增字段</h4>
            </div>
            <div class="modal-body">
                <div class="panel panel-default"><!--面板-->
                    <div class="panel-heading"><!--面板头部-->
                        字段内容
                    </div>
                    <div class="panel-body"><!--面板内容-->
                        <div>
                            <form id="addFieldForm" onsubmit="return false">
                                <div class="row">
                                    <div class="form-group col-lg-6">
                                        <label>名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：</label>
                                        <input class="form-control" id="nameShort" style="width:200px;display: inline">
                                    </div>
                                    <div class="form-group col-lg-6">
                                        <label>字段名称：</label>
                                        <input class="form-control" id="name" style="width:200px;display: inline">
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="form-group col-lg-6">
                                        <label>字段类型：</label>
                                        <select class="form-control" id="type" style="width:200px;display: inline">
                                            <option value="VARCHAR(255)">字符串</option>
                                            <option value="INT">整型</option>
                                            <option value="FLOAT">浮点型</option>
                                            <option value="TEXT">文本</option>
                                            <option value="DATE">日期</option>
                                            <option value="TIMESTEAMP">时间</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-lg-6">
                                        <label>字段简介：</label>
                                        <textarea class="form-control" rows="3" id="explain" style="width:200px;display: inline"></textarea>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- /.row (nested) -->
                    </div>
                    <!-- /.panel-body -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="submitFiledForm()">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /. WRAPPER  -->
<!-- JS Scripts-->
<!-- jQuery Js -->
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Metis Menu Js -->
<script src="assets/js/jquery.metisMenu.js"></script>
<!-- DATA TABLE SCRIPTS -->
<script src="assets/js/dataTables/jquery.dataTables.js"></script>
<script src="assets/js/dataTables/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="assets/js/dataTables/dataTables.buttons.js"></script>
<script type="text/javascript" src="assets/js/dataTables/buttons.bootstrap.js"></script>
<script type="text/javascript" src="js/RootDialog.js"></script>
<script type="text/javascript" src="js/RootUtils.js"></script>

<script src="js/CustomForm.js"></script>
<script>
    //参数处理
    var baseUrl = window.location.origin;
    var db = new localDB();
    $(function(){
        var search = window.location.search;
        var param = {};
        if(search){
            search = search.substring(1).split("&");
        }
        for(var i = 0; i<search.length; i++){
            var nv = search[i].split("=");
            param[nv[0]]=nv[1];
        }

        db.saveData("tableParam",param);

        $("#tableId").val(param.table);
        $("#tableName").val(param.name);
    });
    $(document).ready(function () {

        //绑定查询事件
        $("#search").click(function () {
            var where = $("#searchForm");
            //查询数据
            CustomForm.search("customField",where,function(result){
                // 生成表格
                if(result.result=="success"){
                    var data = result.data;
                    var dataArray = [];
                    for(var i = 0;i<data.length;i++){
                        var rowData = [];
                        var rowObj = data[i];
                        var optionHtml = "<button onclick='editField("+rowObj+")' class='btn btn-sm btn-info'>编辑</button>" +
                            "<button onclick='deleteField("+rowObj.id+")' class='btn btn-sm btn-danger'>删除</button>";
                        rowData.push(i+1);
                        rowData.push(rowObj.nameShort);
                        rowData.push(rowObj.name);
                        rowData.push(rowObj.explain);
                        rowData.push(rowObj.type?rowObj.type:"");
                        rowData.push(optionHtml);
                        dataArray.push(rowData);
                    }

                    $('#table-content').html("");
                    $('#table-content').html('<table class="table table-striped table-bordered table-hover" id="dataTables-customForm"></table>' );
                    $('#dataTables-customForm').dataTable({
                        "aLengthMenu":[10,20,40,60],
                        "searching":false,//禁用搜索
                        "lengthChange":true,
                        "paging": true,//开启表格分页
                        "bProcessing" : true,
                        "bServerSide" : false,
                        "bAutoWidth" : false,
                        "sort" : "position",
                        "deferRender":true,//延迟渲染
                        "bStateSave" : false, //在第三页刷新页面，会自动到第一页
                        "iDisplayLength" : 10,
                        "iDisplayStart" : 0,
                        "dom": '<l<\'#topPlugin\'>f>rt<ip><"clear">',
                        "data":dataArray,
                        "columns":[
                            { "title": "序号" },
                            { "title": "实体名称" },
                            { "title": "物理表名" },
                            { "title": "中文备注"},
                            { "title": "字段类型"},
                            { "title": "操作"}
                        ],
                        "oLanguage" : { // 国际化配置
                            "sProcessing" : "正在获取数据，请稍后...",
                            "sLengthMenu" : "显示 _MENU_ 条",
                            "sZeroRecords" : "没有找到数据",
                            "sInfo" : "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条",
                            "sInfoEmpty" : "记录数为0",
                            "sInfoFiltered" : "(全部记录数 _MAX_ 条)",
                            "sInfoPostFix" : "",
                            "sSearch" : "搜索",
                            "sUrl" : "",
                            "oPaginate" : {
                                "sFirst" : "第一页",
                                "sPrevious" : "上一页",
                                "sNext" : "下一页",
                                "sLast" : "最后一页"
                            }
                        },
                        initComplete:initComplete
                    });
                }
            });
        });
        $("#search").click();
    });

    /**
     * 表格加载渲染完毕后执行的方法
     * @param data
     */
    function initComplete(data){
        //上方topPlugin DIV中追加HTML
        //var topPlugin='<button id="addButton" class="btn btn-success btn-sm" data-toggle="modal" data-target="#addUser" style="display:block;">' +
        // '<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加用户</button>';

        //删除用户按钮的HTMLDOM
        var topPlugin='&nbsp;&nbsp;<button id="add" class="btn btn-primary btn-sm addBtn" onclick="addField()">新 增</button>';

        $("#topPlugin").append(topPlugin);//在表格上方topPlugin DIV中追加HTML
        $("#topPlugin").css("text-align","right");

        //$("#expCsv").on("click", exp1);//给下方按钮绑定事件
    }

    /**
     * 添加事件
     */
    function addField(){
        // var html = "";
        // _alert("新增字段","");
        $("#myModal").modal('show');
    }

    /**
     * 删除事件
     */
    function deleteField(id){
        _confirm("系统提示","是否删除该字段",{
            callback:function (v) {
                if(v){
                    jQuery.ajax({
                        url:baseUrl+"/custom/column/delete/?id="+id,
                        type:"get",
                        dataType:"json",
                        success:function(result){
                            if(result.result=="success"){
                                $("#search").click();
                            }else{
                                _alert("系统提示",result.message);
                            }
                        },
                        error:function (z,x,c) {
                            console.log(z);
                        }
                    });
                }
            }
        });
    }

    /**
     * 保存字段
     */
    function submitFiledForm(){
        var data = {};

        data["name"]=$("#name").val();
        data["nameShort"]=$("#nameShort").val();
        data["type"]=$("#type").val();
        data["explain"]=$("#explain").val();
        data["tableId"]=$("#tableId").val();

        jQuery.ajax({
            url:baseUrl+"/custom/column/add/",
            type:"post",
            dataType:"json",
            contentType:"application/json",
            data:JSON.stringify(data),
            success:function(result){
                if(result.result=="success"){
                    $("#myModal").modal('hide');
                    $("#search").click();
                }else{
                    _alert("系统提示",result.message);
                }
            },
            error:function (z,x,c) {
                console.log(z);
            }
        });
    }
</script>
</body>
</html>